import React from 'react'
import PropTypes from 'prop-types'
import { getDate } from '../utils/getDate'
import { Menu, Dropdown, Layout, Avatar } from 'antd'
import { LoginOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import EditPassWord from "./editPassWord";
import { withRouter } from "react-router-dom";
import TheDialog from "@/components/TheDialog";

const { Header } = Layout
class AppHeader extends React.Component {
  state = {
    time: getDate(),
    userName: '',
    roleName: sessionStorage.getItem('roleName') || '',
    dialogStatus:false
  }

  componentDidMount() {
    if (this.props.user) {
      this.setState({
        userName: this.props.user.userName,
        dialogStatus: false
      })
    }
  }
  editUserPassWord = () => {
    this.setState({
      dialogStatus: true
    })
  }
  updatePassWordSuccess = () => {

    this.setState({
      dialogStatus: false
    }, () => {
      this.loginOut()
    })
  }
  dialogClose = () => {

    this.setState({
      dialogStatus: false
    })
  }
  loginOut = () => {
    sessionStorage.clear();
    localStorage.clear();
    window.location.reload()
  }
  render() {
    let { menuClick, avatar, menuToggle, user } = this.props
    let { userName, roleName ,dialogStatus} = this.state
    return (
      <Header className='header'>
        <div className='left'
          onClick={menuClick}>
          {!menuToggle ? <MenuFoldOutlined /> : <MenuUnfoldOutlined />}
        </div>
        <div style={{ width: 200, marginLeft: 10 }}>{sessionStorage.getItem('menuName') || ''}</div>

        <div style={{ width: '100%' }}>
          <div className='mr15'>
            <a rel='noopener noreferrer' href='https://github.com/ltadpoles/react-admin' target='_blank'>
            </a>
          </div>
          <div className='fr'>
            <Dropdown overlay={
              <Menu>
                <Menu.Item onClick={this.loginOut}>
                  <div style={{ 'textAlign': 'center' }}>
                    退出登录
                  </div>
                </Menu.Item>
                <Menu.Divider></Menu.Divider>
                <Menu.Item onClick={this.editUserPassWord}>
                  <div style={{ 'textAlign': 'center' }}> 修改密码  </div>
                </Menu.Item>
                <Menu.Divider></Menu.Divider>
                <Menu.Item disabled>
                  <div style={{ 'textAlign': 'center' }}>
                    {roleName}
                  </div>
                </Menu.Item>
              </Menu>
            } overlayStyle={{ width: '20rem' }}>
              <div className='ant-dropdown-link'>
                <span className='ant-dropdown-name'>{userName}</span>
                <Avatar src={avatar} alt='avatar' style={{ cursor: 'pointer' }} />
              </div>
            </Dropdown>
          </div>
        </div>
        <TheDialog
          visible={dialogStatus}
          title="修改密码"
          handleCancel={this.dialogClose}
          footer={null}
        >
          <EditPassWord handleCancel={this.dialogClose} updateSuccess={this.updatePassWordSuccess} />
        </TheDialog>
      </Header>
    )
  }
}

AppHeader.propTypes = {
  menuClick: PropTypes.func,
  avatar: PropTypes.string,
  menuToggle: PropTypes.bool,
  loginOut: PropTypes.func,
  user: PropTypes.string
}

export default withRouter(AppHeader)
